<template>
  <v-bottom-sheet v-model="bottomlist.sheet" inset>
    <v-sheet class="px-3 bg-color-transparent">
      <div class="list-container">
        <div class="list-container-title">
          <span>播放列表</span>
        </div>
        <div ref="list" class="list-list">
          <v-list-item-group ref="listgroup">
            <jc-list-item
              v-for="item in list"
              :key="item._id"
              :item="item"
              to-type="replace"
              @itemclick="itemClick"
            ></jc-list-item>
          </v-list-item-group>
        </div>
      </div>
    </v-sheet>
  </v-bottom-sheet>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import JcListItem from "./JcListItem";
import { gedanController } from "../api/cloudbase-user-action-log";

export default {
  name: "globaleList",
  computed: {
    ...mapGetters(["bottomlist", "audio"]),
  },
  components: { JcListItem },
  data() {
    return {
      list: [],
      page: 1,
      limit: 10,
    };
  },
  mounted() {
    this.handlerList().then((res) => {
      this.list = res.list;
      this.page += 1;
    });
  },
  methods: {
    ...mapActions({
      getShiJiitems: "sgb/getItems",
    }),
    itemClick(item) {
      this.bottomlist.sheet = false;
      //自动播放开启
      this.$store.commit("audio/setAutoPlay", true);
    },
    handlerList() {
      return new Promise((resolve) => {
        if (this.bottomlist.type === "shiji") {
          this.$store
            .dispatch("sgb/getList", {
              page: this.page,
              limit: this.limit,
              index: this.bottomlist.id,
            })
            .then((res) => {
              resolve(res);
            });
        } else if (this.bottomlist.type === "gedan") {
          gedanController.getGeDanDatailList(this.bottomlist.id).then((res) => {
            console.log(res);
            const ids = res.list;
            this.getShiJiitems(ids).then((list) => {
              resolve({ list });
            });
          });
        }
      });
    },
  },
  watch: {
    "bottomlist.sheet": function (newVal) {
      if (newVal) {
        setTimeout(() => {
          this.$refs.list.onscroll = (e) => {
            const scrollTop = e.target.scrollTop;
            const offsetHeight = e.target.offsetHeight;
            const listGroupOffsetHeight = e.target.children[0].offsetHeight;
            if (scrollTop + offsetHeight >= listGroupOffsetHeight) {
              this.$store;
              this.handlerList().then((res) => {
                if (this.list.length >= res.total) {
                  return;
                }
                this.list.push(...res.list);
                this.page += 1;
              });
            }
          };
        }, 200);
      }
    },
    "bottomlist.id": function (id) {
      this.list = [];
      this.page = 1;
      this.handlerList().then((res) => {
        this.list = res.list;
        this.page += 1;
      });
    },
  },
};
</script>

<style scoped>
.list-container {
  max-height: 400px;
  background-color: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.list-container-title {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0 10px;
  box-sizing: border-box;
}
.list-list {
  max-height: 340px;
  overflow: auto;
}
</style>
